<template>
  <div>
    <charts :option="option"></charts>
  </div>
</template>

<script>
import charts from "./charts.vue";
import { mapState } from "vuex";
export default {
  components: { charts },
  name: "ChartLeftPie",
  data() {
    return {
      option: {},
    };
  },
  mounted() {
    this.updateChart();
  },
  watch: {
    LeftPie: {
      deep: true,
      handler(a, b) {
        this.updateChart();
      },
    },
  },
  computed: {
    ...mapState({ LeftPie: "LeftPie" }),
  },
  methods: {
    updateChart() {
      const option = {
        color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          bottom: "0%",
          // 修改小图标的大小
          itemWidth: 10,
          itemHeight: 10,
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        series: [
          {
            name: "年龄分布",
            type: "pie",
            // 这个radius可以修改饼形图的大小
            // radius 第一个值是内圆的半径 第二个值是外圆的半径
            radius: ["40%", "60%"],
            center: ["50%", "45%"],
            avoidLabelOverlap: false,
            // 图形上的文字
            label: {
              show: false,
              position: "center",
            },
            // 链接文字和图形的线是否显示
            labelLine: {
              show: false,
            },
            data: this.LeftPie,
          },
        ],
      };
      this.option = option;
    },
  },
};
</script>

<style lang="less" scoped>
</style>